<template>
  <view class="verulia-layout">
    <!-- 导航栏 -->
    <uv-navbar title="我的" left-icon="" :placeholder="true" bg-color="#4c83ff" :title-style="{ color: '#fff' }"></uv-navbar>
    <view class="verulia-layout__body" style="padding: 0;">
      <!--顶部个人信息栏-->
      <view class="header-section">
        <view class="flex padding justify-between">
          <view class="flex align-center">
            <view class="cu-avatar lg round bg-grey">
              <uv-avatar :src="avatar" size="60" bg-color="#ffffff"></uv-avatar>
            </view>
            <view class="user-info" @click="handleToInfo">
              <view class="u_title">
                {{ name }}
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 联系内容 -->
      <view class="content-section">
        <view class="mine-actions grid col-2 text-center">
          <view class="action-item">
            <view class="cu-btn content" style="background-color: #ffffff; height: 40px;">
              <uv-button open-type="feedback" :custom-style="{ border: '0' }">
                <view class="flex justify-center">
                  <uv-icon name="email" size="40" color="#9258fc" bold></uv-icon>
                </view>
              </uv-button>
            </view>
            <text class="text">意见反馈</text>
          </view>
          <view class="action-item">
            <view class="cu-btn content" style="background-color: #ffffff; height: 40px;">
              <uv-button open-type="contact" :custom-style="{ border: '0' }">
                <view class="flex justify-center">
                  <uv-icon name="kefu-ermai" size="40" color="#fc892b" bold></uv-icon>
                </view>
              </uv-button>
            </view>
            <text class="text">联系我们</text>
          </view>
        </view>
      </view>

      <!-- 功能清单 -->
      <view class="cu-list menu sm-border menu-section">
        <!-- 个人信息 -->
        <view class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: 2*0.1 + 's'}]">
          <button class="cu-btn content" @click="handleToInfo">
            <text class="cuIcon-peoplefill text-grey"></text>
            <text class="text-grey">个人信息</text>
          </button>
        </view>
        <view class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: 3*0.1 + 's'}]">
          <button class="cu-btn content" @click="handleToMessage">
            <text class="cuIcon-messagefill text-yellow"></text>
            <text class="text-grey">消 息</text>
          </button>
          <view class="action">
            <uv-badge number-type="overflow" type="error" max="99" :value="100"></uv-badge>
          </view>
        </view>
        <view class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: 4*0.1 + 's'}]">
          <button class="cu-btn content">
            <text class="cuIcon-medalfill text-olive"></text>
            <text class="text-grey">个人证书</text>
          </button>
        </view>
        <view class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: 6*0.1 + 's'}]">
          <view class="content">
            <text class="cuIcon-emojiflashfill text-pink"></text>
            <text class="text-grey">通讯录</text>
          </view>
          <view class="action">
            <view class="cu-avatar-group">
              <view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
              <view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);"></view>
              <view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);"></view>
              <view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg);"></view>
            </view>
            <text class="text-grey text-sm">4 人</text>
          </view>
        </view>
        <view class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: 7*0.1 + 's'}]">
          <view class="content">
            <text class="cuIcon-btn text-green"></text>
            <text class="text-grey">按钮</text>
          </view>
          <view class="action">
            <button class="cu-btn round bg-green shadow">
              <text class="cuIcon-upload"></text>
              上传
            </button>
          </view>
        </view>
        <view class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: 8*0.1 + 's'}]">
          <view class="content">
            <text class="cuIcon-tagfill text-red  margin-right-xs"></text>
            <text class="text-grey">标签</text>
          </view>
          <view class="action">
            <view class="cu-tag round bg-orange light">音乐</view>
            <view class="cu-tag round bg-olive light">电影</view>
            <view class="cu-tag round bg-blue light">旅行</view>
          </view>
        </view>
        <view class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: 9*0.1 + 's'}]">
          <navigator class="content" hover-class="none" url="/subpackages/pages_mine/about/index">
            <text class="cuIcon-newshotfill text-brown"></text>
            <text class="text-grey">关于我们</text>
          </navigator>
        </view>
        <!-- 应用设置 -->
        <view class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: 10*0.1 + 's'}]">
          <navigator class="content" hover-class="none" url="/subpackages/pages_mine/setting/index">
            <text class="cuIcon-settingsfill text-green"></text>
            <text class="text-grey">应用设置</text>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import useUserStore from '@/store/modules/user.store'
import { formatAxis } from '@/core/utils/verulia'

const { proxy } = getCurrentInstance() as ComponentInternalInstance

const userStore = useUserStore();
const { nickname, avatar } = storeToRefs(userStore)
const name = computed(() => {
  if (!nickname.value) {
    return ''
  }
  return formatAxis(new Date()) + '! ' + nickname.value
})

/**
 * 跳转用户信息
 */
const handleToInfo = () => {
  proxy?.$tab.navigateTo('/subpackages/pages_mine/info/index')
}

const handleToMessage = () => {
  proxy?.$modal.msg('正在开发中...')
}
</script>

<style lang="scss" scoped>
.verulia-layout {
  background-color: #f5f6f7;
}

.header-section {
  padding: 15px 15px 45px 15px;
  background-color: #4c83ff;
  color: white;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;

  .login-tip {
    font-size: 18px;
    margin-left: 20px;
  }

  .user-info {
    margin-left: 15px;

    .u_title {
      font-size: 18px;
      line-height: 30px;
    }
  }
}

.content-section {
  position: relative;
  top: -50px;

  .mine-actions {
    margin: 15px 15px;
    padding: 20px 0;
    border-radius: 8px;
    background-color: white;

    .action-item {
      .text {
        display: block;
        font-size: 13px;
        margin: 8px 0;
      }
    }
  }
}

.menu-section {
  margin-top: -50px;
}
</style>
